<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>wechat_beacon_demo</title>
</head>
<body>
<div class="start" style="margin:30px 15px;width:150px;height:50px;text-align: center;
    background-color: green;color: #fff;line-height: 50px;font-size: 18px;">开始搜索</div>
<div class="stop" style="margin:30px 15px;width:150px;height:50px;text-align: center;
    background-color: red;color: #fff;line-height: 50px;font-size: 18px;">结束搜索</div>
<div class="empty" style="margin:30px 15px;width:150px;height:50px;text-align: center;
    background-color: blue;color: #fff;line-height: 50px;font-size: 18px;">清空内容</div>
<div class="type" style="margin:30px 15px;width:150px;height:50px;text-align: center;
    line-height: 50px;font-size: 18px;">
   <select name="type">
   <option value='1'>rssi</option>
   <option value='2'>distance</option>
   </select>    
</div>
<input type="text" name="paraA" placeholder="一米的rssi">
<input type="text" name="paran" placeholder="环境因子">
<div class="show" style="width:100%;"></div>

<script type="text/javascript" src=" http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript">
var WXsignature,WXappid,WXnonceStr,WXtimestamp;
var jsapilist = ['startSearchBeacons','stopSearchBeacons','onSearchBeacons'];
var $$ = Dom7;
//请求权限申请参数
$$.ajax({
	url:"http://api.wayatrip.com/weixinapi/init_wx_jsapi",
    method:"GET",
    data: {from_url:window.location.href},
    dataType:'json',
    async:false,
    success: function (ajaxresult) {    	
    	if(ajaxresult.code==1){
    		var res=ajaxresult.data;
    		WXsignature = res.signature;
    		WXappid = res.appid;
    		WXnonceStr = res.nonceStr;
    		WXtimestamp = res.timestamp;
        }else{
            console.log(ajaxresult.msg);
        }
    }
});

//权限申请
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: WXappid, // 必填，公众号的唯一标识
    timestamp: WXtimestamp, // 必填，生成签名的时间戳
    nonceStr: WXnonceStr, // 必填，生成签名的随机串
    signature: WXsignature,// 必填，签名，见附录1
    jsApiList: jsapilist // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

//权限通过调用
wx.ready(function(){
	$$('div.show').append('微信js-sdk调用成功<hr/>');
	
	//检测js接口是否可用
	wx.checkJsApi({
	    jsApiList: jsapilist, 
	    success: function(res) {
	        // 以键值对的形式返回，可用的api值true，不可用为false
	        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
	        var i;
	        var result = res.checkResult;
	        for(i in result){
	        	$$('div.show').append(i+"=>"+result[i]+'<br>');
	        }
	        
	    }
	});
	
	//点击开始搜索，开始监听周边ibeacon
	$$('div.start').click(function(){
		//打开接口
		wx.startSearchBeacons({
			  ticket:"",//非必须，摇周边的业务ticket，系统自动添加在摇出来的页面链接后面  
			  complete:function(argv){
	             $$('div.show').append('<hr/>'+argv.errMsg);
	             //绑定监听事件
	             wx.onSearchBeacons({
	   			  complete:function(argv){
	   				  //清空信息框
	   				  $$('div.show').html('');
	   				  var now = new Date;
	   				  $$('div.show').append('<hr/>'+now.getHours()+':'+now.getMinutes()
	   						               +':'+now.getSeconds()+'<br>');
	   				  //$$('div.show').append(JSON.stringify(argv));
	   				  var i;
	   				  var beacons = argv.beacons;
	   				  var type = $$('select[name="type"]').val();
	   				  //alert(type+typeof(type));
	   				  var A = parseFloat($$('input[name="paraA"]').val());
	   				  //alert(A+typeof(A));
				      var n = parseFloat($$('input[name="paran"]').val());
				      //alert(n+typeof(n));
	   				  for(i in beacons){
	   					  var deviceNo = parseInt(i)+1;
	   					  $$('div.show').append('设备'+deviceNo+'<br>');
	   					  var x;
	   					  for(x in beacons[i]){
	   						  if(x == 'rssi' && type == '2'){
	   							  var mi = (parseFloat(Math.abs(beacons[i][x]))-A)/parseFloat(10)/n;
	   							  //alert(mi);
	   							  var d = Math.pow(10,mi);
	   							  //alert(d);
	   							  $$('div.show').append('distance'+'=>'+d+'<br>');
	   						  }else{
	   							  $$('div.show').append(x+'=>'+beacons[i][x]+'<br>');
	   						  }
	   					  }
	   				  }
	   				  
	   			  }
	   		     });
			  }
		});
		
	});
	//关闭搜索ibeacon
	$$('div.stop').click(function(){
		wx.stopSearchBeacons({
			  complete:function(res){
				  $$('div.show').append('<hr/>'+res.errMsg);
			  }
		});
	});
	//清空信息框
	$$('div.empty').click(function(){
		$$('div.show').html('');
	});
});

//权限失败调用
wx.error(function(res){
	$$('div.show').append('微信js-sdk调用失败<hr/>');;
});
</script>
</body>
</html>